<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="批量修改人员信息"
    width="860px"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <el-form
      :model="formValues"
      label-position="top"
      ref="formRef"
      @keydown.enter.stop
      @submit.prevent
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开发人员">
            <select-personnel
              key="1"
              v-model="formValues.developer_id"
              placeholder="请选择"
              style="width: 100%"
            ></select-personnel>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采购人员">
            <select-personnel
              key="2"
              v-model="formValues.purchaser_id"
              placeholder="请选择"
              style="width: 100%"
            ></select-personnel>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="质检人员">
            <select-personnel
              key="3"
              v-model="formValues.quality_inspector_id"
              placeholder="请选择"
              style="width: 100%"
            ></select-personnel>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片处理人员">
            <select-personnel
              key="4"
              v-model="formValues.img_processor_id"
              placeholder="请选择"
              style="width: 100%"
            ></select-personnel>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="编辑处理人员">
            <select-personnel
              key="5"
              v-model="formValues.editor_id"
              placeholder="请选择"
              style="width: 100%"
            ></select-personnel>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="footer-btn">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { batchUpdatePerson } from "../api.js";
const visible = ref(false);
const loading = ref(false);
const formValues = ref({});
const formRef = ref();
const ids = ref({});
const emit = defineEmits(["refresh"]);
const load = ref(false);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  ids.value.sku_ids = data;
  visible.value = true;
};

const save = async () => {
  const valid = await formRef.value.validate();
  if (!valid) return;
  loading.value = true;
  try {
    const res = await batchUpdatePerson(Object.assign({}, formValues.value, ids.value));
    if (res.code === 200) {
      ElMessage.success("操作成功");
      close(true);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

const close = async (refresh) => {
  ids.value = {};
  formValues.value = {};
  await nextTick();
  await formRef.value.resetFields();
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
